{% extends "base.html" %}

{% block title %}首页 - {{ app_name }}{% endblock %}

{% block content %}
<div class="row">
    <div class="col-lg-8 mx-auto">
        <!-- 欢迎区域 -->
        <div class="hero-section text-center mb-5">
            <div class="card border-0 shadow-lg">
                <div class="card-body py-5">
                    <div class="mb-4">
                        <i class="fas fa-shield-alt text-primary" style="font-size: 4rem;"></i>
                    </div>
                    <h1 class="display-4 fw-bold text-primary mb-3">{{ app_name }}</h1>
                    <p class="lead text-muted mb-4">
                        安全、便捷的在线密码管理解决方案<br>
                        保护您的数字生活，让密码管理变得简单
                    </p>
                    <div class="d-grid gap-2 d-md-flex justify-content-md-center">
                        <a href="/password-generator" class="btn btn-primary btn-lg me-md-2">
                            <i class="fas fa-key me-2"></i>密码生成器
                        </a>
                        {% if user %}
                            {% if user.role == 'admin' %}
                            <a href="/admin" class="btn btn-outline-primary btn-lg">
                                <i class="fas fa-cog me-2"></i>管理后台
                            </a>
                            {% endif %}
                            <a href="/logout" class="btn btn-outline-secondary btn-lg">
                                <i class="fas fa-sign-out-alt me-2"></i>退出登录
                            </a>
                        {% else %}
                            <a href="/login" class="btn btn-outline-primary btn-lg">
                                <i class="fas fa-sign-in-alt me-2"></i>用户登录
                            </a>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        <!-- 功能特色 -->
        <div class="row g-4 mb-5">
            <div class="col-md-6">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body text-center">
                        <div class="feature-icon mb-3">
                            <i class="fas fa-users text-primary" style="font-size: 2.5rem;"></i>
                        </div>
                        <h5 class="card-title">账号管理</h5>
                        <p class="card-text text-muted">
                            完整的用户账号管理功能，支持用户信息维护、密码找回等操作
                        </p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body text-center">
                        <div class="feature-icon mb-3">
                            <i class="fas fa-lock text-success" style="font-size: 2.5rem;"></i>
                        </div>
                        <h5 class="card-title">密码管理</h5>
                        <p class="card-text text-muted">
                            安全存储网站密码信息，支持批量导入导出，让密码管理更高效
                        </p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body text-center">
                        <div class="feature-icon mb-3">
                            <i class="fas fa-random text-warning" style="font-size: 2.5rem;"></i>
                        </div>
                        <h5 class="card-title">密码生成</h5>
                        <p class="card-text text-muted">
                            智能密码生成器，支持6-32位密码，多种字符组合，确保密码强度
                        </p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body text-center">
                        <div class="feature-icon mb-3">
                            <i class="fas fa-share-alt text-info" style="font-size: 2.5rem;"></i>
                        </div>
                        <h5 class="card-title">安全分享</h5>
                        <p class="card-text text-muted">
                            安全的密码分享功能，可追踪访问记录和IP地址，确保分享安全
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 安全提示 -->
        <div class="alert alert-info border-0 shadow-sm" role="alert">
            <div class="d-flex">
                <div class="flex-shrink-0">
                    <i class="fas fa-info-circle fa-lg"></i>
                </div>
                <div class="flex-grow-1 ms-3">
                    <h6 class="alert-heading">安全提示</h6>
                    <p class="mb-0">
                        我们采用先进的加密技术保护您的密码安全，所有敏感数据均经过加密存储。
                        请定期更新您的密码，并使用强密码保护您的账户安全。
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_css %}
<style>
.hero-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 15px;
    color: white;
}

.hero-section .card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 15px;
}

.feature-icon {
    transition: transform 0.3s ease;
}

.card:hover .feature-icon {
    transform: scale(1.1);
}

.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;
}
</style>
{% endblock %}